<template>
  <div class="menu-content">
    <div class="menu">
      <!--  首页  -->
      <div class="home-page" @click="skip()">
        <img src="@/assets/index/home.png" alt="">
        <div class="text">首页</div>
      </div>
      <!--   返回按钮   -->
      <div class="go-back" @click="back()" v-if="this.$route.path!='/'">
        <img src="@/assets/index/return.png" alt="">
<!--        <img src="@" alt="">-->
        <div class="text">返回</div>
      </div>

<!--            <div class="home-page" @click="skip()">-->
<!--              <img src="@/assets/index/home.png" alt="">-->
<!--              <div class="text">首页</div>-->
<!--            </div>-->

      <div class="location">
        当前位置：
<!--        <span>首页</span>-->
        <el-breadcrumb separator=">">
          <el-breadcrumb-item v-for="(item,idnex) in breadList" :key="item.path">
            <span v-if="idnex==breadList.length-1" class="noCursor">{{ item.meta.title }}</span>
            <span v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import {pathToRegexp} from 'path-to-regexp'

export default {
  data(){
    return{
      breadList:null
    }
  },
  watch: {
    $route(){
      this.getBreadcrumb()
    }
  },
  mounted() {
    this.getBreadcrumb()
  },
  methods:{
    getBreadcrumb(){
      let matched = this.$route.matched.filter(item=>item.meta && item.meta.title)
      const first = matched[0] && matched[0].name
      if(!(first.toLocaleLowerCase()==='HomeView'.toLocaleLowerCase())){
        matched = [{ path:'/',meta:{ title:'首页'} }].concat(matched)
      }
      this.breadList = matched
    },
    handleLink(item){
      const { params } = this.$route
      const { path } = item
      let PathRule = pathToRegexp.compile(path)
      this.$router.push(PathRule(params))
    },
    back(){
      if (window.history.length <= 1) {
        this.$router.push({path:'/'})
        return false
      } else {
        this.$router.go(-1)
      }
    },
    skip(){
      this.$router.push({ name: 'HomeView' })
    }
  },
}
</script>

<style lang="scss" scoped>
.menu{
  display: flex;
  width: 800px;
  margin: 50px auto;
  .go-back{
    background-color: #fff;
    border-radius: 15px;
    box-sizing: border-box;
    width: 130px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    cursor:pointer;
    font-size: 20px;
    img{
      width: 25px;
      height: 25px;
    }
    .text{
      padding-left: 8px;
      color: #619BF4;
    }
  }
  .home-page{
    background-color: #fff;
    border-radius: 15px;
    box-sizing: border-box;
    width: 130px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    //margin-left: 15px;
    font-size: 20px;
    margin-right: 15px;
    cursor: pointer;
    img{
      width: 35px;
      height: 35px;
    }
    .text{
      padding-left: 5px;
      color: #619BF4;
    }
  }
  .location{
    height: 40px;
    display: flex;
    align-items: center;
    //margin: 7px 0 0 15px;
    margin-left: 10px;
    box-sizing: border-box;
    color: #619BF4;
    font-size: 18px;
    ::v-deep{
      .el-breadcrumb__inner{
        color: #619BF4;
      }
      .el-breadcrumb{
        font-size: 18px;
      }
      .el-breadcrumb__separator{
        color: #619BF4;
      }
    }
    //重写面包屑的字体颜色
    //.myColor /deep/ .el-breadcrumb__inner {
    //  color: #3A6DF3 ;
    //}
    //或者这样写
    //.myColor >>> .el-breadcrumb__inner {
    //  color: #3A6DF3 ;
    //}

  }
}
</style>
